<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<u-tabs
      lineColor="#409EFF"
      lineWidth="120rpx"
      :list="[{ name: '试卷概况' }]"
    />
		<view class="form-contain">
      <u-form
        :rules="rules"
        labelPosition="left"
        :model="formInfo"
        labelWidth="auto"
        ref="addForm"
      >
        <u-form-item
          label="试卷名称"
          prop="sjmc"
          borderBottom
        >
          <u-input
            inputAlign="center"
            :disabled="type === 3"
            v-model="formInfo.sjmc"
            :placeholder="type === 3 ? '' : '请输入试卷名称'"
            border="none"
          />
        </u-form-item>
        <u-form-item
          label="考试时间"
          prop="kssj"
          @click="type !== 3 ? isShowDatetime = true : null"
          borderBottom
        >
          <u-input
            inputAlign="center"
            disabled
            v-model="formInfo.kssj"
            :placeholder="type === 3 ? '' : '请选择考试时间'"
            border="none"
          >
            <u-icon
              slot="suffix"
              name="arrow-right"
            />
          </u-input>
        </u-form-item>
        <u-form-item
          label="答对题量"
          prop="ddtl"
          borderBottom
        >
          <u-input
            inputAlign="center"
            :disabled="type === 3"
            v-model="formInfo.ddtl"
            :placeholder="type === 3 ? '' : '请输入答对题量(道)'"
            type="number"
            border="none"
          />
        </u-form-item>
        <u-form-item
          label="考试分数"
          prop="ksfs"
          borderBottom
        >
          <u-input
            inputAlign="center"
            :disabled="type === 3"
            v-model="formInfo.ksfs"
            :placeholder="type === 3 ? '' : '请输入考试分数'"
            type="number"
            border="none"
          />
        </u-form-item>
        <u-form-item
          label="考试用时"
          prop="ksys"
          borderBottom
        >
          <u-input
            inputAlign="center"
            :disabled="type === 3"
            v-model="formInfo.ksys"
            :placeholder="type === 3 ? '' : '请输入考试用时(min)'"
            type="number"
            border="none"
          />
        </u-form-item>
      </u-form>
    </view>
    <u-tabs
      lineColor="#409EFF"
      lineWidth="120rpx"
      :list="[{ name: '分数详情' }]"
    />
    <view class="form-contain">
      <view class="title">常识</view>
      <u-form
        labelPosition="left"
        :model="formInfo"
        labelWidth="auto"
      >
        <u-row gutter="24">
          <u-col span="6">
            <u-form-item label="正确率" prop="cszql" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.cszql" :disabled="type === 3" border="none">
                <text slot="suffix">%</text>
              </u-input>
            </u-form-item>
          </u-col>
          <u-col span="6">
            <u-form-item label="用时" prop="csys" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.csys" :disabled="type === 3" border="none">
                <text slot="suffix">min</text>
              </u-input>
            </u-form-item>
          </u-col>
        </u-row>
      </u-form>
      <view class="title">言语</view>
      <u-form
        labelPosition="left"
        :model="formInfo"
        labelWidth="auto"
      >
        <u-row gutter="24">
          <u-col span="6">
            <u-form-item label="正确率" prop="yyzql" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.yyzql" :disabled="type === 3" border="none">
                <text slot="suffix">%</text>
              </u-input>
            </u-form-item>
          </u-col>
          <u-col span="6">
            <u-form-item label="用时" prop="yyys" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.yyys" :disabled="type === 3" border="none">
                <text slot="suffix">min</text>
              </u-input>
            </u-form-item>
          </u-col>
        </u-row>
      </u-form>
      <view class="title">数量</view>
      <u-form
        labelPosition="left"
        :model="formInfo"
        labelWidth="auto"
      >
        <u-row gutter="24">
          <u-col span="6">
            <u-form-item label="正确率" prop="slzql" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.slzql" :disabled="type === 3" border="none">
                <text slot="suffix">%</text>
              </u-input>
            </u-form-item>
          </u-col>
          <u-col span="6">
            <u-form-item label="用时" prop="slys" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.slys" :disabled="type === 3" border="none">
                <text slot="suffix">min</text>
              </u-input>
            </u-form-item>
          </u-col>
        </u-row>
      </u-form>
      <view class="title">判断</view>
      <u-form
        labelPosition="left"
        :model="formInfo"
        labelWidth="auto"
      >
        <u-row gutter="24">
          <u-col span="6">
            <u-form-item label="正确率" prop="pdzql" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.pdzql" :disabled="type === 3" border="none">
                <text slot="suffix">%</text>
              </u-input>
            </u-form-item>
          </u-col>
          <u-col span="6">
            <u-form-item label="用时" prop="pdys" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.pdys" :disabled="type === 3" border="none">
                <text slot="suffix">min</text>
              </u-input>
            </u-form-item>
          </u-col>
        </u-row>
      </u-form>
      <view class="title">资料</view>
      <u-form
        labelPosition="left"
        :model="formInfo"
        labelWidth="auto"
      >
        <u-row gutter="24">
          <u-col span="6">
            <u-form-item label="正确率" prop="zlzql" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.zlzql" :disabled="type === 3" border="none">
                <text slot="suffix">%</text>
              </u-input>
            </u-form-item>
          </u-col>
          <u-col span="6">
            <u-form-item label="用时" prop="zlys" borderBottom>
              <u-input inputAlign="center" v-model="formInfo.zlys" :disabled="type === 3" border="none">
                <text slot="suffix">min</text>
              </u-input>
            </u-form-item>
          </u-col>
        </u-row>
      </u-form>
    </view>
    <u-tabs
      lineColor="#409EFF"
      lineWidth="120rpx"
      :list="[{ name: '整卷总结' }]"
    />
    <view class="form-contain bottom-contain">
      <u-form
        labelPosition="left"
        :model="formInfo"
        labelWidth="auto"
      >
        <u-form-item prop="zjzj" borderBottom>
          <u-textarea v-model="formInfo.zjzj" :disabled="type === 3" height="130" count maxlength="500" border="bottom" placeholder="复盘是认识自己、提升自己的必由之路，行测的提高离不开一次次的复盘，言语，判断，资料更是重中之重。" />
        </u-form-item>
      </u-form>
    </view>
    <view class="bottom-btn-contain">
      <view style="width: 100%;">
        <u-button v-if="type === 1" type="primary" shape="circle" @click="toAdd">保存复盘</u-button>
        <u-button v-if="type === 2" type="primary" shape="circle" @click="toUpdate">确认修改</u-button>
         <u-row v-if="type === 3" gutter="24">
          <u-col span="6">
            <u-button type="error" shape="circle" @click="toDelete">删除复盘</u-button>
          </u-col>
          <u-col span="6">
            <u-button type="primary" shape="circle" @click="type = 2">编辑复盘</u-button>
          </u-col>
        </u-row>
      </view>
    </view>
		<u-datetime-picker
      :show="isShowDatetime"
      ref="datetimePicker"
      mode="date"
      v-model="pickerVal"
      @cancel="isShowDatetime = false"
      @confirm="confirm"
    />
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { sjxqAdd, sjxqEdit, sjxqDelete } from "@/config/api.js"

export const addFormRules = {
	'sjmc': {
		required: true,
		message: '请输入试卷名称',
		trigger: ['blur', 'change']
	},
	'kssj': {
    required: true,
    message: '请选择考试时间',
    trigger: ['blur', 'change']
	},
	'ddtl': {
    required: true,
    message: '请输入答对题量',
    trigger: ['blur', 'change']
	},
	'ksfs': {
    required: true,
    message: '请输入考试分数',
    trigger: ['blur', 'change']
	},
	'ksys': {
    required: true,
    message: '请输入考试用时',
    trigger: ['blur', 'change']
	}
}

export default {
	data() {
		return {
			rules: addFormRules,
      // 1新增，2编辑，3详情
      type: 1,
      formInfo: {
        ksbh: '',
        sjmc: '',
        kssj: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
        ddtl: null,
        ksfs: null,
        ksys: null,
        cszql: null,
        csys: null,
        yyzql: null,
        yyys: null,
        slzql: null,
        slys: null,
        pdzql: null,
        pdys: null,
        zlzql: null,
        zlys: null,
        zjzj: ''
      },
      isShowDatetime: false,
      pickerVal: Number(new Date().setHours(0,0,0,0)),
		}
	},
  computed: {
		...mapState(['user']),
    title() {
      switch (this.type) {
        case 1:
          return '新增复盘'
        case 2:
          return '编辑复盘'
        case 3:
          return '复盘详情'
      }
    }
	},
  onLoad(option) {
    if (option.data) {
      const data = JSON.parse(option.data)
      this.formInfo = data
      this.pickerVal = new Date(data.kssj).getTime()
      this.type = Number(option.type)
    }
  },
	onShow() {
    // 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter)
	},
	methods: {
		formatter(type, value) {
				if (type === 'year') {
						return `${value}年`
				}
				if (type === 'month') {
						return `${value}月`
				}
				if (type === 'day') {
						return `${value}日`
				}
				if (type === 'hour') {
						return `${value}时`
				}
				if (type === 'minute') {
						return `${value}分`
				}
				return value
		},
    confirm(e) {
			this.pickerVal = e.value
      this.formInfo.kssj = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
			this.isShowDatetime = false
		},
    toAdd() {
      this.$refs.addForm.validate().then(async () => {
				const res = await sjxqAdd({ ...this.formInfo, userId: this.user.userId, loginName: this.user.loginName })
				if (res) {
					uni.$u.toast('保存成功')
					setTimeout(()=>{
						uni.navigateBack({delta: 1})
					},500)
				}
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
    },
    toUpdate() {
      this.$refs.addForm.validate().then(async () => {
				const res = await sjxqEdit({ ...this.formInfo, userId: this.user.userId, loginName: this.user.loginName })
				if (res) {
					uni.$u.toast('修改成功')
					setTimeout(()=>{
						uni.navigateBack({delta: 1})
					},500)
				}
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
    },
    async toDelete() {
      const res = await sjxqDelete(this.formInfo.ksbh)
      if (res) {
        uni.$u.toast('删除成功')
        setTimeout(()=>{
          uni.navigateBack({delta: 1})
        },500)
      }
    }
	},
	onReady() {
		// onReady 为uni-app支持的生命周期之一
		this.$refs.addForm.setRules(this.rules)
	}
}
</script>

<style lang="scss" scoped>
.view-contain {
  position: relative;
  height: 100vh;
  overflow-y: auto;

  .form-contain {
    background-color: #fff;
    border-radius: 32rpx;
    margin: 12rpx 24rpx;
    padding: 24rpx;

    .title {
      font-weight: bold;
      margin-bottom: 16rpx;
    }

    &.bottom-contain {
      margin-bottom: 200rpx;
    }
  }
  
  .bottom-btn-contain {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: calc(100vw - 48rpx);
    height: 150rpx;
    background-color: #fff;
    padding: 48rpx 24rpx 0;
  }
}
</style>